<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由-基本</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

    <style>
        .user-content {
            width: 300px;
            height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: coral;
            border-radius: 50%;
        }
    </style>
</head>

<body>
<div id="app">
    <h1>路由props传参</h1>
    <div style="background-color: coral" @click="clickTo">切换到用户页面</div>
    <router-view></router-view>
</div>

<script>
    //定义组件
    const User = {
        template: '<div class="user-content"><div>{{title}}</div><p>{{other}}</p></div>',
        props: {
            title: {
                type: String,
                default: ''
            },
            other:"other"
        },
        created(){
            // console.log("app:",this.$root.temp);
            // this.title = this.$root.temp;
            this.title = this.$route.params.title;
        }
    }

    //路由配置
    const router = new VueRouter({
        routes: [
            // {path: '/user', component: User},
            //作用不大，仅仅是将props移到路由配置来进行初始化。避免$route使用导致两个组件耦合性大。
            //但props的方式，无法在跳转时就指定（this.$router.pusht(props:xxx)）
            //而在路由配置时,通过引入vuex，或其他全局对象的形式,填入{path:'',props:vuex.xxx}，显得如此麻烦
            //感觉不怎么好用。毕竟解耦了

            // {path:'/user',component:User,props:{title:'用户信息'}}
            {path:'/user/:title',name:'ut',component:User}
        ]
    })

    //使用路由
    var v = new Vue({
        router: router,
        methods:{
            clickTo(){
                // this.$root.temp = '123';
                this.$router.push({name:'ut',params:{title:'用户信息'}});
            }
        }
    }).$mount("#app")

</script>

</body>
</html>